const table = document.querySelector('.list')
const total = document.querySelector('.total')
// 发起数据请求
const grtStudentList = async () => {
  const res = await axios({
    url: '/students',
  })
  // console.log(res);

  const htmlStr = res.data
    .map((item) => {
      // gender经过转换0是女fals，1是ture男
      // data-id=${item.id}绑定id
      return `
    <tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender ? '男' : '女'}</td> 
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salsry}</td>
    <td>${item.province + item.city + item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"
        ><i class="bi bi-pen" data-id=${item.id}></i
      ></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${
        item.id
      }"></i></a>
    </td>
  </tr>`
    })
    .join('')
  table.innerHTML = htmlStr
  total.innerHTML = res.data.length
}

grtStudentList()

// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
// 获取模态框中的表单元素
const form = document.querySelector('#form')
// 获取提交按钮
const submitBtn = document.querySelector('#submit')

// 显示省市区
const initCity = async () => {
  // 获取省份的数据
  const res = await axios({
    url: '/api/province',
  })
  // console.log(res.data);

  // 渲染省份下拉框的option
  const provinceStr = res.data
    .map((item) => {
      return `<option value="${item}">--${item}--</option>`
    })
    .join('')

  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`

  ps.addEventListener('change', async function () {
    // console.log(ps.value)
    // 发起获取对应省份的城市数据
    const res = await axios({ url: '/api/city', params: { pname: ps.value } })
    // console.log(res)

    // 渲染城市下拉框的option
    const cityStr = res.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')

    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

    cs.addEventListener('change', async function () {
      console.log(ps.value)
      // 发起获取对应城市的城市数据
      const res = await axios({
        url: '/api/area',
        params: { pname: ps.value, cname: cs.value },
      }) //pname: ps.value省把参数传过去
      // console.log(res)

      // 渲染地区下拉框的option
      const areaStr = res.data
        .map((item) => {
          return `<option value="${item}">--${item}--</option>`
        })
        .join('')

      as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    })
  })
}
initCity()

// 弹出模态框
const addBtn = document.querySelector('#openModal')

// 点击添加按钮显示modal层，给modal层设置自定义属性
addBtn.addEventListener('click', function () {
  // 点击添加，打开modal层前重置表单
  form.reset()
  modalBox.dataset.id = 'add'
  modalBox.querySelector('.modal-title').innerHTML="添加学员"
  modal.show()
  // console.log(1)
})

// 给提交按钮绑定事件
submitBtn.addEventListener('click', async function () {
  // 获取表单数据
  // hash: true 转换为对象
  const data = serialize(form, { hash: true })

  // 转换数据类型
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  // console.log(data);

  // 限制组号1-8
  if (data.group < 1 || data.group > 8) return alert('组号只能选择1-8')
  
  // 提交之前做判断，如果自定义属性为add那么提交添加学生
  if (modalBox.dataset.id==='add') { try {
    // 请求添加学生
    const res = await axios({ url: '/students', method: 'post', data })
    // 关闭modal层
    modal.hide()
    // 调用渲染函数重新刷新页面
    getSelection()
    // 提示用户已添加成功
    alert(res.message)

    // console.log(res)
  } catch (error) {
    alert(error)
    }
   }
//  如果自定义属性为id，提交修改学生请求
  else {
    try {
      const res = await axios({ url: '/students/' + modalBox.dataset.id, method: 'put', data })
      // 关闭modal层
      modal.hide()
      // 调用渲染函数重新刷新页面
      getSelection()
      // 提示用户已添加成功
      alert(res.message)
      // console.log(res);
    } catch (error) {
      alert(error)
    }
   
  }
})
// 事件委托
table.addEventListener('click', async function (e) {
  // 判断点击功能
  // console.log(e.target.classList.contains('bi-pen'));
  if (e.target.classList.contains('bi-pen')) {
    console.log('我是编辑功能')
    console.log(e.target.dataset.id)
    // 获取学生的id
    const id = e.target.dataset.id
    // 获取学生详细的请求
    const res = await axios({ url: '/students/' + id })
    // console.log(res);

    // 接受名字的容器
    // modalBox.querySelector('input[name=name]').value = res.data.name
    // console.log(res.data.name);

    // 获取所有带name属性的表单框
    const nodelist = modalBox.querySelectorAll('[name]')
    // console.log(nodelist);

    // 循环遍历表单框集合
    nodelist.forEach((item) => {
      // 判断男女 1男 0女
      if (item.name === 'gender') {
        res.data[item.name]
          ? (modalBox.querySelector('#cb01').checked = true)
          : (modalBox.querySelector('#cb02').checked = true)
      }

      // console.log(item.name);
      // console.log(res.data[item.name]);
      item.value = res.data[item.name]
    })

// 获取城市列表
    const { data: cityData } = await axios({
      url: '/api/city',
      params:{pname:res.data.province}
    })
    // 渲染城市下拉框选项
    const cityStr = cityData
      .map(item => {
        return `<option value="${item}">--${item}--</option>`
      }).join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

// 给城市下拉框赋值
    cs.value=res.data.city

    
// 获取城市列表
    const { data: areaData } = await axios({
      url: '/api/area',
      params:{pname:res.data.province,cname:res.data.city}
    })
     
    // 渲染地区下拉框选项
    const areaStr = areaData
      .map(item => {
        return `<option value="${item}">--${item}--</option>`
      }).join('')
    
    as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    
    // 给地区下拉框赋值
    as.value=res.data.area


    // 设置modal自定义属性，把学生id给到modal层自定义属性
    modalBox.dataset.id = id
    modalBox.querySelector('.modal-title').innerHTML="修改学员信息"



    // 打开modal层
    modal.show()
  }
  if (e.target.classList.contains('bi-trash')) {
    // 获取学生id
    const id = e.target.dataset.id 
    // 发起删除学生请求
    await axios({ url: '/students/' + id, method: 'delete' })
    // 调用渲染函数重新刷新页面
    grtStudentList()
    // 提示用户删除成功
    alert('删除成功')
   
     
  }
})
